<template>
  <view class="container">
    <view class="navbar u-f-ajc">
      <image src="/static/jibei/home/back.png" class="abso_back" mode="widthFix"
        @click="$u.route({type: 'back', delta: 1})"></image>
      <image src="/static/jibei/xiaobei/header.png" mode="widthFix"></image>
    </view>

    <view class="content">
      <view class="card1">
        <view class="u-f">
          <image src="/static/jibei/xiaobei/bi.png" mode=""></image>
          <view class="card1_right_box u-f1">
            <view style="font-size: 38rpx;">小贝来源</view>
            <view style="font-size: 20rpx;">※小贝不接受各个国家的法定货币购买，只接受会员内部的储值小贝每天1%和储值积分每天万分之五的小贝算力来兑换。</view>
          </view>
        </view>
        <view class="card1_right_box u-f1">
          <view style="font-size: 38rpx;">小贝价值</view>
          <view>
            <view style="font-size: 20rpx;">※一个小贝抵扣一元现金使用。</view>
            <view style="font-size: 20rpx;">※可以在全球购消费中心抵扣50%-100%的现金使用。</view>
            <view style="font-size: 20rpx;">※可以在全球汇好项目抵扣509%100%现金使用。</view>
            <view style="font-size: 20rpx;">※可以享受每轮消费算法带来的小贝数量增长。</view>
          </view>
        </view>
      </view>

      <view class="card2 u-f-ac u-f-jsb f-w-w">
        <view class="card2_box u-f u-f-column">
          <view>当前算力 {{wheel}}轮</view>
          <view class="nums">{{zichan_power}}</view>
        </view>
        <view class="card2_box u-f u-f-column" @click="obtain">
          <view>储值小贝</view>
          <view class="nums">{{bz}}</view>
        </view>
        <view class="card2_box u-f-ac" style="justify-content: space-between;">
          <view>
            <view>小贝个数</view>
            <view class="nums">000</view>
          </view>
          <view class="dui u-f-ajc" @click="togetbuy">兑</view>
        </view>
        <view class="card2_box u-f u-f-column" @click="tozczdh">
          <view>已兑换数</view>
          <view class="nums">{{bz_release}}</view>
        </view>
      </view>
      <scroll-view scroll-y class="item_list">
        <view class="items u-f-ac">
          <view class="u-f-ajc" style="width: 33.3%;">信息展示</view>
          <view class="u-f-ajc" style="width: 33.3%;">数量</view>
          <view class="u-f-ajc" style="width: 33.3%;">当时算力</view>
        </view>
        <view class="items items2 u-f-ac" v-for="(value,key) in list" :key="key">
          <view class="u-f-ajc" style="width: 33.3%;">兑换算力</view>
          <view class="u-f-ajc" style="width: 33.3%;">{{value.num}}</view>
          <view class="u-f-ajc" style="width: 33.3%;">{{value.price}}</view>
        </view>
      </scroll-view>

    </view>

    <tabbars :current="2"></tabbars>


    <!-- <view
      style="display: flex;background-color: #fff;width: 100%;padding-top: 5px;position: fixed;bottom: 5upx;height: 120upx;background-color: #115763;color: #fff;justify-content: space-around;">
      <view class="u-f-ajc u-f-column" @click="getbuy">
        <image style="width: 66upx;height: 66upx;" src="../../../static/goumai.png" mode=""></image>
        <view style="font-size: 20rpx;">
          购买
        </view>
      </view>
      <view class="u-f-ajc u-f-column" @click="togetbuy">
        <image style="width: 66upx;height: 66upx;" src="../../../static/duihuan.png" mode=""></image>
        <view style="font-size: 20rpx;">
          兑换易豆
        </view>
      </view>
      <view class="u-f-ajc u-f-column" @click="getsale">
        <image style="width: 66upx;height: 66upx;" src="../../../static/guamai.png" mode=""></image>
        <view style="font-size: 20rpx;">
          挂卖
        </view>
      </view>
    </view> -->


  </view>
</template>

<script>
  import uniLoadMore from '../../../components/uni-load-more.vue';
  // import uCharts from '@/components/u-charts/u-charts.js';
  // import  { isJSON } from '@/common/checker.js';
  var _self;
  var canvaLineA = null;
  export default {
    components: {
      uniLoadMore,
      // uCharts,
      // canvas
    },
    data() {
      return {
        cWidth: '',
        cHeight: '',
        pixelRatio: 1,
        textarea: '',
        itemCount: 6, //x轴单屏数据密度
        sliderMax: 50,
        s_exchange: '',
        list: [],
        wheel: '',
        zichan_power: '',
        nzichan_power: '',
        bz: '',
        bz_release: '',
        res: [],
        openid: '',
        systemInfo: [],
        active: "active",
        index: 1,
        topres: 1,
        newsList: [],
        loadingText: '加载中...',
        loadingType: 0,
        contentText: {
          contentdown: '上拉显示更多',
          contentrefresh: '正在加载...',
          contentnomore: '没有更多数据了'
        },
        load: 0,
        page: 1,
        timer: {},
        // option:{
        // 	xAxis: [1592459758000,1592459858000,1592459958000,1592460058000],
        // 	yAxis: {},
        // 	data: [
        // 				{
        // 						title: '上证指数',
        // 						isBg: true,
        // 						data:[1,20,30,40],
        // 				}

        // 	],
        // 	dataLineXColor: ['#E70012', '#49A6E9']
        // },
      }
    },
    onLoad: function(e) {
      // uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.getassets()
          this.getassets1()
          this.getnewsList()
          //页面一加载时请求一次数据`
          // uni.hideLoading()
        },
        fail: () => {
          uni.navigateTo({
            url: '../login/login'
          });
        }
      });
      _self = this;
      //#ifdef MP-ALIPAY
      uni.getSystemInfo({
        success: function(res) {
          if (res.pixelRatio > 1) {
            //正常这里给2就行，如果pixelRatio=3性能会降低一点
            //_self.pixelRatio =res.pixelRatio;
            _self.pixelRatio = 2;
          }
        }
      });
      //#endif
      this.cWidth = uni.upx2px(750);
      this.cHeight = uni.upx2px(500);
      this.getServerData();
    },
    // 下拉刷新
    onPullDownRefresh() {
      this.getnewsList()
    },
    // 上拉加载
    onReachBottom() {
      if (this.timer != null) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.getmorenews()
      }, 1000);
    },
    onReady() {

    },
    methods: {
      getServerData() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=tzz.k_data&app=1',
          data: {},
          success: function(res) {
            console.log(res.data)
            let LineA = {
              categories: [],
              series: []
            };

            // LineA.categories= res.data.xAxis;
            LineA.categories = ['五天前', '四天前', '三天前', '两天前', '一天前'];

            let l = [{
              area: [],
              color: '#1890ff',
              data: [],
              index: 0,
              legendShape: "line",
              name: " ",
              pointShape: "circle",
              show: true,
              type: 'line'
            }]
            l[0].data = res.data.data[0].data.slice(-5)
            LineA.series = l;

            _self.textarea = JSON.stringify(res.data.data.LineA);
            // _self.showLineA("canvasLineA",LineA);
          },
          fail: () => {
            _self.tips = "网络错误，小程序端请检查合法域名";
          },
        });
      },
      // showLineA(canvasId,chartData){
      // 	canvaLineA=new uCharts({
      // 		$this:_self,
      // 		canvasId: canvasId,
      // 		type: 'line',
      // 		fontSize:11,
      // 		padding:[15,20,0,15],
      // 		legend:{
      // 			show:true,
      // 			padding:5,
      // 			lineHeight:11,
      // 			margin:0,
      // 		},
      // 		dataLabel:true,
      // 		dataPointShape:true,
      // 		background:'#FFFFFF',
      // 		pixelRatio:_self.pixelRatio,
      // 		categories: chartData.categories,
      // 		series: chartData.series,
      // 		animation: true,
      // 		xAxis: {
      // 			type:'grid',
      // 			gridColor:'#CCCCCC',
      // 			gridType:'dash',
      // 			dashLength:8,
      //       boundaryGap:'justify'
      // 		},
      // 		yAxis: {
      // 			gridType:'dash',
      // 			gridColor:'#CCCCCC',
      // 			dashLength:8,
      // 			splitNumber:5,
      // 			format:(val)=>{return val.toFixed(0)}
      // 		},
      // 		width: _self.cWidth*_self.pixelRatio,
      // 		height: _self.cHeight*_self.pixelRatio,
      // 		extra: {
      // 			line:{
      // 				type: 'curve'
      // 			}
      // 		}
      // 	});
      // 	//下面是默认选中索引
      // 	let cindex=3;
      // 	//下面是自定义文案
      // 	let textList=[{text:'最新报道',color:null},{text:'算力曲线',color:'#1890ff'}];
      // 	//下面是event的模拟,tooltip的Y坐标值通过这个mp.changedTouches[0].y控制
      // 	let tmpevent={mp:{changedTouches:[{x: 0, y: 80}]}};
      // 	setTimeout(()=>{
      // 		canvaLineA.showToolTip( tmpevent , {
      // 			index:cindex,
      // 			textList:textList
      // 		});
      // 	},200)
      // },
      touchLineA(e) {
        canvaLineA.touchLegend(e);
        canvaLineA.showToolTip(e, {
          format: function(item, category) {
            return category + ' ' + item.name + ':' + item.data
          }
        });
      },
      changeData() {
        if (isJSON(_self.textarea)) {
          let newdata = JSON.parse(_self.textarea);
          canvaLineA.updateData({
            series: newdata.series,
            categories: newdata.categories
          });
        } else {
          uni.showToast({
            title: '数据格式错误',
            image: '../../../static/images/alert-warning.png'
          })
        }
      },
      touchCandle(e) {
        canvaCandle.scrollStart(e);
      },
      moveCandle(e) {
        canvaCandle.scroll(e);
      },
      touchEndCandle(e) {
        canvaCandle.scrollEnd(e);
        //下面是toolTip事件，如果滚动后不需要显示，可不填写
        canvaCandle.showToolTip(e, {
          format: function(item, category) {
            return category + ' ' + item.name + ':' + item.data
          }
        });
      },
      tapButton(type) {
        let step = 5;
        if (type == 'in') {
          _self.itemCount -= step;
          if (_self.itemCount <= 5) {
            _self.itemCount = 5;
          }
        } else {
          _self.itemCount += step;
          if (_self.itemCount >= _self.sliderMax) {
            _self.itemCount = _self.sliderMax;
          }
        }
        _self.zoomCandle(_self.itemCount);
      },
      sliderMove(e) {
        _self.itemCount = e.detail.value;
        _self.zoomCandle(e.detail.value);
      },
      zoomCandle(val) {
        canvaCandle.zoom({
          itemCount: val
        });
      },
      //获取资产值信息
      getassets() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.bz_exchange&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: (res) => {
            this.wheel = res.data.wheel
            this.zichan_power = res.data.zichan_power
            this.s_exchange = res.data.s_exchange
            this.bz_release = res.data.bz_release
            this.bz = res.data.bz
            this.nzichan_power = res.data.nzichan_power
          },
          fail: () => {},
          complete: () => {}
        });
      },
      getassets1() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.bz_exchange.bz_exchange_list&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: (res) => {
            this.list = res.data.result.list
          },
          fail: () => {},
          complete: () => {}
        });
      },
      tokxt() {
        uni.navigateTo({
          url: 'kxt/kxt'
        })
      },
      getbuy() {
        uni.navigateTo({
          url: 'buy'
        })
      },
      getsale() {
        uni.navigateTo({
          url: 'sale'
        })
      },
      togetbuy() {
        uni.navigateTo({
          url: 'getbuy'
        })
      },
      tozczdh() {
        uni.navigateTo({
          url: 'zczdh'
        })
      },
      obtain() {
        uni.navigateTo({
          url: 'obtain/obtain?type=' + 2
        })
      },
      getmorenews() {
        this.page++; //每触底一次 page +1
        if (this.loadingType !== 0) { //loadingType!=0;直接返回
          return false;
        }
        this.loadingType = 1;
        uni.showNavigationBarLoading(); //显示加载动画
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.tzz&app=' +
            this.page,
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: function(res) {
            if (res.data.tzz == '') { //没有数据
              this.loadingType = 2;
              uni.hideNavigationBarLoading(); //关闭加载动画
              return;
            }
            // this.newsList = this.newsList.concat(res.data.tzz);//将数据拼接在一起
            this.loadingType = 0; //将loadingType归0重置
            uni.hideNavigationBarLoading(); //关闭加载动画
          }
        });
      },
      // 第一次请求数据，刷新

      getnewsList() {
        // this.setTopAjax()
        this.loadingType = 0;
        uni.showNavigationBarLoading();
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.tzz&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            this.page++; //得到数据之后page+1
            this.topres = res.data.leiji_tzz;
            this.newsList = res.data.tzz;
            uni.hideNavigationBarLoading();
            uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
          }
        });
      },
    },
  }
</script>

<style lang="scss">
  page {
    background-color: #B5C3C7;
  }

  .container {
    width: 100%;
    height: 100vh;
    background: url(/static/jibei/home/home_bg.png) no-repeat 0 0;
    background-size: cover;
    box-sizing: border-box;
  }

  .navbar {
    width: 100%;
    padding: 100rpx 0 30rpx;

    image {
      width: 80%;
    }
  }

  .content {
    padding: 0 40rpx;
    padding-bottom: 200rpx;
    color: #FFFFFF;
  }

  .card1 {
    width: 100%;
    height: 480rpx;
    border-radius: 10rpx;
    border: 1px solid #00FBF6;
    background-color: #0A3641;
    margin-bottom: 20rpx;
    padding: 30rpx;

    image {
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
    }

    .card1_right_box {
      // background-color: skyblue;
    }
  }

  .card2 {
    width: 100%;

    .card2_box {
      justify-content: center;
      width: 49%;
      height: 170rpx;
      border-radius: 10rpx;
      border: 1px solid #00FBF6;
      background-color: #0A3641;
      padding: 0 40rpx;
      margin-bottom: 20rpx;

      .nums {
        font-weight: 700;
        font-size: 44rpx;
      }

      .dui {
        width: 70rpx;
        height: 70rpx;
        border-radius: 100%;
        border: 2px solid #FFFFFF;
        box-sizing: border-box;
        font-size: 40rpx;
      }
    }
  }

  .item_list {
    width: 100%;
    height: 450rpx;
    border-radius: 10rpx;
    border: 1px solid #00FBF6;
    background-color: #0A3641;
    margin-bottom: 20rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .items {
      view {
        font-size: 24rpx;
        padding: 14rpx 0;
        border-bottom: 1px solid #072834;
        box-sizing: border-box;
      }
    }

    // .items2 {

    // }
  }
</style>
